<div class="row">
  <div class="offset-md-3 col-md-6">
    <div class="card">
      <div class="card-header">
        <h2>{{ 'signup' }}</h2>
      </div>
      <div class="card-block">
        <form id="form" name="form" class="form" [formGroup]="signupForm" (ngSubmit)="submit()" novalidate>
          <div class="row">
            <div class="col-md-6">
              <div class="form-group" [class.has-danger]="firstName.invalid && !firstName.pristine">
                <label class="form-control-label" for="firstName">{{'firstName'}}</label>
                <input class="form-control" id="firstName" name="firstName" [formControl]="firstName"/>
                <div class="form-control-feedback"  *ngIf="firstName.invalid && !firstName.pristine">
                  <p *ngIf="firstName.errors.required">FirstName is required</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group" [class.has-danger]="lastName.invalid && !lastName.pristine">
                <label class="form-control-label col-md-12" for="lastName">{{'lastName'}}</label>
                <input class="form-control" id="lastName" name="lastName" [formControl]="lastName"/>
                <div class="form-control-feedback"  *ngIf="lastName.invalid && !lastName.pristine">
                  <p *ngIf="lastName.errors.required">LastName is required</p>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group" [class.has-danger]="email.invalid && !email.pristine">
            <label class="form-control-label" for="email">{{'email'}}</label>
            <input class="form-control" id="email" name="email" type="email" [formControl]="email"/>
            <div class="form-control-feedback" *ngIf="email.invalid && !email.pristine">
              <p *ngIf="email.errors.required">email is required</p>
              <p *ngIf="email.errors.minlength">email is too short(at least 6 chars)</p>
              <p *ngIf="email.errors.maxlength">email is too long(at most 20 chars)</p>
            </div>
          </div>
          <div class="row" [formGroup]="passwordGroup">
              <div class="col-md-12">
                <div class="form-group" [class.has-danger]="password.invalid && !password.pristine">
                  <label class="form-control-label" for="password">{{'password'}}</label>
                  <input class="form-control" type="password" name="password" id="password" [formControl]="password" />
                  <div class="form-control-feedback"  *ngIf="password.invalid && !password.pristine">
                    <p *ngIf="password.errors.required">Password is required.</p>
                    <p *ngIf="password.errors.minlength||password.errors.maxlength">Password should be consist of 6 to 20 characters.</p>
                  </div>
                </div>
            </div>
            <div class="col-md-12">
               <div class="form-group" [class.has-danger]="passwordConfirm.invalid && !passwordConfirm.pristine">
                <label class="form-control-label" for="passwordConfirm">{{'passwordConfirm'}}</label>
                <input class="form-control" type="password" name="passwordConfirm" id="passwordConfirm" [formControl]="passwordConfirm" />
                <div class="form-control-feedback"  *ngIf="passwordConfirm.invalid && !passwordConfirm.pristine">
                  <p *ngIf="passwordConfirm.errors.required">passwordConfirm is required.</p>
                  <p *ngIf="passwordConfirm.errors.minlength||passwordConfirm.errors.maxlength">passwordConfirm should be consist of 6 to 20 characters.</p>
                </div>
              </div>
            </div>
            <div class="col-md-12" [class.has-danger]="passwordGroup.invalid">
              <div class="form-control-feedback" *ngIf="passwordGroup.invalid">
                <p *ngIf="passwordGroup.hasError('mismatch')">Passwords are mismatched.</p>
              </div>
            </div>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-success btn-lg" [disabled]="signupForm.invalid || signupForm.pending">  {{'SIGN UP'}}</button>
          </div>
        </form>
      </div>
      <div class="card-footer">
        Already resgistered, <a [routerLink]="['','signin']">{{'signin'}}</a>
      </div>
    </div>
  </div>
</div>
